<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" name="" id="ipt">

    <script>
        /* 
            手写节流函数(封装节流函数---闭包和延时器)
        
        */

        function throttle(func, wait) {
            // func=check
            let isHas = false;//记录是否 已经有一个延时器启动了--- 是局部变量，但是因为闭包--像是全局变量

            return function () {

                //节流中每次调用都是  返回的新函数--节流的逻辑 写到这里面
                // input多次触发-1000 之内 只有一个延时器启动
                // 第一次触发input  启动延时器--1000后执行
                // 第二次触发input  判断-是否有 延时器启动了，如果有 就不启动。如果没有再启动
                if (isHas == true) {
                    //已经有延时器启动了
                } else {
                    //说明没有延时器启动
                    isHas = true
                    setTimeout(() => {
                        // check()
                        func()
                        // 一旦延时器执行 说明延时器执行完毕了，将isHash 改成false
                        isHas = false
                    }, wait);
                }
            }

        }
        function check() {
            console.log('check');
        }

        // 创建一个节流函数newCheck ，（newCheck连续多次执行） 在 1000 秒内最多执行 check 一次的函数
        var newCheck = throttle(check, 1000)

        let ipt = document.querySelector("input");
        ipt.oninput = function () {
            console.log('input');
            newCheck()

        }
    </script>

</body>

</html>